<template>
  <div class="commonTableSty">
    <a-table
      :components="tableComponents"
      :columns="columns"
      :rowKey="(record, index) => index"
      :dataSource="processList"
      :pagination="false"
     
    >
     <!-- :scroll="{y:true}" -->
      <template
        slot="auditHierarchy"
        slot-scope="text, record"
      >
        <span>{{ $t(`levelAudit${record.level}`) }}</span>
      </template>
      <!-- 审核角色 -->
      <template
        slot="auditRoles"
        slot-scope="text, record,index"
      >
        <a-select
          v-model="record.roleId"
          showSearch
          placeholder
          optionFilterProp="children"
          :filterOption="$commonFun.filterOption"
          :disabled="record.cannotOpre"
          @change="changeRole($event,index)"
          style="width:100%"
        >
          <a-select-option
            v-for="(item,indexer) in roleList"
            :key="indexer"
            :value="item.id"
            :title="item.name"
          >
            {{ item.name }}
          </a-select-option>
        </a-select>
      </template>
      <!-- 审核用户 -->
      <template
        slot="auditUsers"
        slot-scope="text, record,index"
      >
        <a-select
          v-model="record.userId"
          showSearch
          placeholder
          optionFilterProp="children"
          :filterOption="$commonFun.filterOption"
          @change="changeUser($event,index)"
          style="width:100%"
        >
          <a-select-option
            v-for="(item,indexer) in record.userList"
            :key="indexer"
            :value="item.id"
            :title="item.account"
          >
            {{ item.account }}
          </a-select-option>
        </a-select>
      </template>
      <template
        slot="action"
        slot-scope="text, record,index"
      >
        <a
          :disabled="index<processList.length-1||processList.length===1||record.cannotOpre"
          @click="handleDelete(index)"
        >{{ $t('delete') }}</a>
      </template>
    </a-table>
    <a-button
      class="newBtn"
      @click="addlist"
      :disabled="processList.length>4"
    >
      +
    </a-button>
  </div>
</template>
<script>
import { mapGetters, mapState } from 'vuex'
import TableEllipsis from '@/components/Ellipsis/TableEllipsis'
import HasNoPermissionTip from '@/components/HasNoPermissionTip'
import tableDraggable from '@/utils/tableDraggable'
import i18n from '@/lang'
const columns = [
  {
    title: i18n.t('auditHierarchy'),
    key: 'auditHierarchy',
    // width: 100,
    scopedSlots: { customRender: 'auditHierarchy' }
  },
  {
    title: i18n.t('auditRoles'),
    key: 'auditRoles',
    // width: 300,
    scopedSlots: { customRender: 'auditRoles' }
  },
  {
    title: i18n.t('auditUsers'),
    key: 'auditUsers',
    // width: 300,
    scopedSlots: { customRender: 'auditUsers' }
  },
  {
    title: i18n.t('operation'),
    dataIndex: 'action',
    width: 90,
    scopedSlots: { customRender: 'action' }
  }
]
export default {
  name: 'AuditProcessList',
  components: {
    TableEllipsis,
    HasNoPermissionTip
  },
  props: {
    // 审核表格数据
    processList: {
      type: Array,
      required: true,
      default () {
        return []
      }
    }
  },
  computed: {
    ...mapGetters(['logindomainCode']),
    ...mapState({
      roleList: (state) => state.role.roleData
    })
  },
  data () {
    return {
      columns,
      tableComponents: {}
    }
  },
  created () {
    const vm = this
    vm.tableComponents = tableDraggable(vm.columns)
    //   获取角色下拉框数据
    vm.$store.dispatch('getRoleData')
  },
  methods: {
    // 选择角色
    changeRole (value, index) {
      const vm = this
      //   初始化用户
      vm.$set(vm.processList[index], 'userId', '')
      vm.$set(vm.processList[index], 'userList', [])
      vm.getUserList(value, index)
    },
    selectRole (value, index) {
      console.log(value, index)
    },
    // 获取用户下拉框数据
    getUserList (roleId, index) {
      const vm = this
      vm.$api.getUserSelect({ roleId }).then(response => {
        vm.$set(vm.processList[index], 'userList', response.data)
        vm.$set(vm.processList[index], 'userId', response.data[0].id)
      })
    },
    // 选中用户c
    changeUser () {
    },
    // 新增某条table
    addlist () {
      const vm = this
      const objItem = {
        level: vm.processList.length + 1
      }
      vm.processList.push(JSON.parse(JSON.stringify(objItem)))
    },
    // 删除单行
    handleDelete (index) {
      const vm = this
      this.submitDisabled = false
      this.$confirm({
        title: vm.$t('deleteAuditProcess'),
        content: vm.$t('deleteAuditProcessTip'),
        onOk () {
          vm.processList.splice(index, 1)
          vm.$emit('changeSubmitDisabled', false)
        },
        onCancel () { }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.newBtn {
  min-width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fafafa;
  margin-top: 16px;
  padding: 0;
  font-size: 24px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
